import { getTranslations } from 'next-intl/server'

interface LayoutProps {
  children: React.ReactNode
}

const Layout: React.FC<LayoutProps> = async (props) => {
  const { children } = props
  const t = await getTranslations('home')
  return (
    <section>
      <div className='h-[1.875rem] lg:h-[5.375rem] 2xl:h-[8.0625rem]' />
      <div className='flex flex-col items-center lg:items-start px-[0.9375rem] lg:px-0 lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px]'>
        {/* Section 标题 */}
        <h2 className='text-[0.875rem] leading-[1.5625rem] text-[#A6C32D] font-bold lg:text-[0.8125rem] lg:leading-[1.4rem] 2xl:text-[1.25rem] 2xl:leading-[1.8rem]'>
          {t('product.title')}
        </h2>
        {/* Section 介绍 */}
        <div className='text-[0.75rem] leading-[1.40625rem] text-[#333333] font-bold text-center lg:text-[1.4375rem] lg:leading-[1.875rem] lg:max-w-[23.875rem] lg:text-left 2xl:text-[2.1875rem] 2xl:leading-[2.8125rem] 2xl:max-w-[35.8125rem]'>
          {t('product.desc')}
        </div>
      </div>
      <div className='h-[1.25rem] lg:h-[3.0625rem] 2xl:h-[4.625rem]' />
      {children}
    </section>
  )
}

export default Layout
